<template>
  <div>
    <!-- 1.点击按钮dialogVisible=true,弹出dialog窗 -->
    <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
    <!-- 
      Dialog 对话框 
      title         标题
      visible="false"               是否显示 Dialog,支持.sync修饰符(:visible.sync)
      width="50%"                   Dialog 的宽度
      fullscreen="false"            是否为全屏 Dialog
      top="15vh"                    Dialog CSS 中的 margin-top 值
      modal="true"                  是否需要遮罩层
      modal-append-to-body="true"   遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Dialog 的父元素上
      append-to-body="false"        Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true
      lock-scroll="true"            是否在 Dialog 出现时将 body 滚动锁定
      custom-class                  Dialog 的自定义类名
      close-on-click-modal="true"   是否可以通过点击 modal 关闭 Dialog
      close-on-press-escape="true"  是否可以通过按下 ESC 关闭 Dialog
      show-close="true"             是否显示关闭按钮
      before-close                  关闭前的回调，会暂停 Dialog 的关闭
      center="false"                是否对头部和底部采用居中布局
      destroy-on-close="false"      关闭时销毁 Dialog 中的元素
    -->
    <el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" title="分配权限">

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="updatePermession(roleId)" :disabled="listLoading">更 新</el-button>
        <el-button type="default" size="small" @click="cancal()">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "TableRole",
  components: { ExcelUpload },
  data() {
    return {
      dialogVisible: false
    }
  }
}
</script>
